@charset "UTF-8";
#detailPage{
  padding-bottom: 20px;
  & .main-container{
    & .detail-fix{
      padding: 10px 15px;
      background-color: $clf;
      box-shadow: 0px 0px 3px rgba(0,0,0,0.15);
      position: fixed;
      top: 46px;
      width: 1080px;
      z-index: 4;
      @include displayFlex(flex,null,null);
      & .fix-img{
        width: 80px;
        height: 80px;
      }
      & .fix-info{
        flex-grow: 1;
        margin-left: 5px;
        & .fix-title{
          font-size: $fontSize + 2;
          color: $fontColor1;
          @include twoColtextOverflow;
          &.important{
            color: $orange;
          }
        }
      }
    }
    & .compete-content{
      display: inline-block;
      width:120px;
      &:hover{
        & .compete-lists{
          display: block;
        }
      }
      & .compete-lists{
        display: none;
        background-color: $clf;
        width: 100%;
        position: absolute;
        top: 32px;
        left: 0;
        border-radius: 5px;
        box-shadow: 0px 0px 20px rgba(0,0,0,0.08);
        z-index: 3;
        padding:5px 0;
        & .compete-list{
          line-height: 32px;
          cursor: pointer;
          text-align: center;
          font-size: $fontSize - 2;
          &:hover{
            background-color: $themeColor5;
          }
        }
      }
    }
    & .goods-detail{
      padding: 15px 15px 0 15px;
      & .goods-img{
        display: inline-block;
        vertical-align: top;
        position: relative;
        & .descrip{
          position: absolute;
          bottom: 0;
          left: 0;
          padding:2px 10px;
          border-radius: 5px;
          color: $clf;
          font-size: $fontSize - 2;
          background-color: rgba(0, 0, 0, 0.4);
        }
        & .quanping{
          cursor: pointer;
          position: absolute;
          bottom: 0;
          right:0;
          height: 14px;
        }
      }
      & img{
        vertical-align: top;
      }
      & .goods-desc{
        display: inline-block;
        vertical-align: top;
        margin-left: 10px;
        font-size: $fontSize - 2;
        position: relative;
        & .title{
          width: 350px;
          font-size: $fontSize + 2;
          @include twoColtextOverflow;
          color: $fontColor1;
          max-height: 48px;
          &.important{
            color: $orange;
          }
        }
        & .money,& .author,& .publish,& .publish-time,& .cate{
          margin-top: 5px;
        }
        & .isbn{
          margin-top: 20px;
        }
        & .lable{
          display: inline-block;
          width: 65px;
        }
        & .value{
          color: $fontColor1;
        }
        & .authors{
          width: 350px;
          font-size: $fontSize + 2;
          @include textOverflow;
          color: $fontColor1;
        }
        & .description{
          height: 80px;
        }
        & .author{
          & .value{
            display: inline-block;
            vertical-align: bottom;
            max-width: 255px;
            @include textOverflow;
          }
        }
        & .author-list{
          position: absolute;
          box-shadow:0 0 10px rgba(0, 0, 0, .15);
          background-color: $clf;
          z-index: 9;
          left:70px;
          top:135px;
          & .author-item{
            padding: 0 15px;
            white-space: nowrap;
            color: $fontColor1;
            line-height: 44px;
            &.click{
              cursor: pointer;
            }
            &:hover{
              background-color: $themeColor5;
            }
          }
        }
        &.author-desc{
          & .lable{
            width: 40px;
          }
        }
      }
      & .radarMap{
        display: inline-block;
        vertical-align: middle;
      }
      & .tabs{
        margin-top: 40px;
      }
    }
    & .choose{
      padding: 9px 15px;
    }
    & .core-data{
      & .content{
        padding: 10px 15px;
        & .data-block{
          width: 260px;
          padding: 15px 20px;
          box-sizing: border-box;
          border: 1px solid $themeColor5;
          cursor: pointer;
          &.active{
            border-color: $themeColor80;
          }
          & .compare{
            font-size: $fontSize - 2;
            & .down-number{
              color:$green;
            }
            & .up-number{
              color: $red;
            }
          }
        }
      }
    }
    & .life-cycle{
      & .data-choose{
        padding: 10px 15px;
        & .data-block{
          display: inline-block;
          width: 230px;
          padding:10px 15px;
          background-color: $themeColor5;
          margin-right: 10px;
        }
        & .set-compare{
          position: relative;
          display: inline-block;
          width: 260px;
          text-align: center;
          line-height: 72px;
          height: 72px;
          border: 1px dashed $themeColor80;
          box-sizing: border-box;
          cursor: pointer;
          & .names{
            @include textOverflow;
            padding:0 10px;
          }
          &.active{
            border-style: solid;
          }
          & .anticon{
            position: absolute;
            right: 5px;
            top: 5px;
          }
          & .search{
            position: absolute;
            width: 100%;
            left: 0;
            top: 75px;
            max-height: 245px;
            overflow-y: auto;
            border-radius: 5px;
            background-color: $clf;
            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.078);
            line-height: normal;
            padding: 5px 0;
            z-index: 9;
            & .list{
              margin-top: 5px;
              & .content{
                line-height: 32px;
                text-align: left;
                color: $fontColor1;
                padding: 0 15px;
                &:hover{
                  background-color: $themeColor5;
                }
                & .title{
                  display: inline-block;
                  width: 88%;
                  vertical-align: middle;
                  @include textOverflow;
                }
              }
            }
          }
        }
      }
    }
    & .basic{
      & .feature{
        padding: 15px;
      }
      & .column {
        width:400px;
        margin-left: 90px;
        font-size: $fontSize - 2;
        margin-top:27px;
        & .column-num {
          color: $fontColor1;
          text-align: center;
          font-weight: 600;
          white-space: nowrap;
        }
        & .column-name{
          text-align: center;
          white-space: nowrap;
        }
      }
    }
    & .detail-desc{
      padding:15px;
      font-size: $fontSize - 2;
      & .content{
        margin-bottom: 5px;
        & .title{
          display: inline-block;
          width: 50px;
        }
        & .desc{
          color: $fontColor1;
          margin-left: 60px;
        }
      }
    }
    & .info-desc{
      padding:15px;
      font-size: $fontSize - 2;
      color:$fontColor1;
      word-break: break-word;
    }
    & .no-data{
      padding:118px 0;
      font-size: $fontSize - 2;
      text-align: center;
    }
  }
}
.popup{
  padding:20px;
  font-size: $fontSize - 2;
  & .city{
    margin-bottom: 5px;
    & .city-title{
      color: $fontColor1;
      font-weight: bold;
    }
    & .city-content{
      color: $fontColor2;
    }
  }
  & .search-result {
    position: absolute;
    width: 100%;
    left: 0;
    top: 32px;
    height: 245px;
    overflow-y: auto;
    border-radius: 5px;
    background-color: $clf;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.078);
    line-height: normal;
    padding: 5px 0;
    z-index: 9;

    & .list {
      margin-top: 5px;

      & .result-content {
        line-height: 32px;
        text-align: left;
        color: $fontColor1;
        padding: 5px 15px;
        cursor: pointer;

        &:hover {
          background-color: $themeColor5;
        }

        & .result-title {
          display: inline-block;
          max-width: 80%;
          vertical-align: middle;
          @include textOverflow;
        }
      }
    }
    & .no-result{
      font-size: $fontSize - 2;
      color: $fontColor1;
      text-align: center;
      margin: 100px 0;
    }
  }
  & .desc-title{
    margin-top:10px;
  }
  & .authors-content{
    &.authors-scroll{
      height: 260px;
      overflow-y: auto;
    }
    & .authors-items{
      margin-top: 10px;
      @include displayFlex(flex,null,center);
      & .authors-image{
        width: 40px;
        height: 40px;
      }
      & .authors-name{
        width: 470px;
        @include textOverflow;
        margin-left: 10px;
        margin-right: 10px;
      }
    }
  }
}